<template>
  <div class="container">
    <!--    头部区域-->
    <div class="header">
      <div class="hd-back" @click="back">
        <i class="el-icon-arrow-left c-font-b"></i>
        <span class="c-font-20 c-font-b c-m-l-5">授权</span>
      </div>
    </div>
    <!--    用户信息区域-->
    <div class="userInfo">
      <div class="user-title">
        <span class="c-font-18 c-font-b c-m-l-10">用户基本信息</span>
      </div>
      <div class="info">
        <div class="userName c-m-r-20">
          <span class="c-m-r-10">用户名称</span>{{ userName }}
        </div>
        <div class="phone c-m-r-20">
          <span class="c-m-r-10">手机号</span>{{ phone }}
        </div>
        <div class="bumen" style="display: flex">
          归属部门
          <div class="c-m-r-10" v-for="(item, index) in bumen" :key="index">
            <span class="c-m-l-10">{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
    <!--    权限树区域-->
    <div class="tree">
      <!--      角色权限-->
      <div class="role-tree">
        <div class="tree-header">
          <span class="c-m-l-10">角色权限</span>
        </div>
        <div class="tree-content">
          <div class="left">
            <span>系统角色:</span>
            <div class="c-m-t-10 c-font-14">
              <el-tree
                style="background: #f9f9f9"
                :data="roleData"
                @check-change="userChecked"
                show-checkbox
                ref="treeRef"
                default-expand-all
                :props="defaultProps"
                node-key="id"
              >
              </el-tree>
            </div>
          </div>
          <div class="right">
            <span>用户拥有:</span>
            <div class="c-m-t-10 c-font-14">
              <el-tree :data="hasUserData" :props="defaultProps"></el-tree>
            </div>
          </div>
        </div>
      </div>
      <!--      数据权限-->
      <div class="data-tree">
        <div class="tree-header">
          <span class="c-m-l-10">数据权限</span>
        </div>
        <div class="tree-content">
          <div class="left">
            <span>系统数据:</span>
            <div class="c-m-t-10">
              <el-tree
                style="background: #f9f9f9"
                :props="defaultProps"
                :data="systemData"
                @check-change="systemChecked"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="canteenRef"
                highlight-current
              >
              </el-tree>
            </div>
          </div>
          <div class="right">
            <span>用户拥有:</span>
            <el-tree :props="defaultProps" :data="userHasSystemData"> </el-tree>
          </div>
        </div>
      </div>
    </div>
    <!--    按钮区域-->
    <div class="btns">
      <el-button type="primary" size="small" @click="submitAuthorize"
        >确定</el-button
      >
      <el-button size="mini" @click="back">取消</el-button>
    </div>
  </div>
</template>

<script>
import userAuthorize from "@/composables/system/user-authorize";

export default {
  setup() {
    const {
      back,
      userName,
      systemChecked,
      canteenRef,
      userHasSystemData,
      phone,
      treeRef,
      bumen,
      defaultProps,
      roleData,
      hasData,
      change,
      currentChange,
      systemData,
      hasUserData,
      userChecked,
      submitAuthorize,
    } = userAuthorize();
    return {
      back,
      canteenRef,
      treeRef,
      userName,
      submitAuthorize,
      systemChecked,
      userHasSystemData,
      defaultProps,
      userChecked,
      bumen,
      phone,
      roleData,
      hasData,
      change,
      currentChange,
      systemData,
      hasUserData,
    };
  },
  name: "UserAuthorize",
};
</script>

<style scoped lang="scss">
.container {
  padding: 30px;

  .header {
    border-bottom: 1px solid #edeff3;
    padding-bottom: 10px;
  }

  .userInfo {
    margin: 20px 0;

    .user-title {
      position: relative;
      margin: 20px 0;

      :after {
        content: "";
        position: absolute;
        top: 2px;
        left: 0;
        width: 2px;
        height: 20px;
        background: #d71820;
      }
    }

    .info {
      display: flex;
      color: #666666;
      font-size: 14px;
      align-items: center;
    }
  }

  .tree {
    display: flex;

    .role-tree {
      flex: 1;
      margin-right: 20px;
    }

    .data-tree {
      flex: 1;
    }

    .tree-header {
      font-size: 18px;
      font-weight: bold;
      position: relative;

      :after {
        content: "";
        position: absolute;
        top: 2px;
        left: 0;
        width: 2px;
        height: 20px;
        background: #d71820;
      }
    }
  }
}

.tree-content {
  height: 500px;
  overflow-y: auto;
  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
  margin: 20px 0;
  background: #ffffff;
  border-radius: 6px;
  display: flex;

  .left {
    padding: 20px;
    flex: 1;
    font-size: 18px;
    font-weight: bold;
    background: #f9f9f9;
  }

  .right {
    flex: 1;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
